import { OneModal } from '@/components/one-ui';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { IOneModalRef } from '@/pages/type';
import { Empty, Spin } from 'antd';
import { Ref, useEffect, useRef } from 'react';
import { ProcdefManageAPI } from '../common/type';
import { getProcdefImageService } from '../services';

export const ViewFlowchartModal: React.FC<ProcdefManageAPI.IViewFlowchartModal> = ({
  onClose,
  visible,
  checkRowObj,
}) => {
  /**
   * modal ref
   */
  const updateTreeRef: Ref<IOneModalRef> = useRef(null);

  /**
   * 关闭弹窗
   */
  const onCloseModal = () => {
    if (updateTreeRef) {
      if (updateTreeRef.current) {
        if (updateTreeRef.current.onModalCancel) {
          updateTreeRef.current.onModalCancel();
        }
      }
    }
  };

  /**
   * 查看流程图接口
   */
  const {
    getProcdefImageLoading,
    getProcdefImageRun,
    getProcdefImageData,
  } = getProcdefImageService();

  useEffect(() => {
    if (checkRowObj && checkRowObj?.id) {
      let params = {
        procDefID: checkRowObj?.id,
      };
      getProcdefImageRun(params);
    }
  }, [checkRowObj]);

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={updateTreeRef}
        title={'查看流程图'}
        width={document.body.clientWidth * 0.7}
        onCancel={onClose}
        bodyStyle={{
          padding: '0px',
          height: document.body.clientHeight * 0.6,
          textAlign: 'center',
          lineHeight: `${document.body.clientHeight * 0.6}px`,
        }}
        centered
        onOk={() => {
          onCloseModal();
        }}
        confirmLoading={getProcdefImageLoading}
      >
        <Spin spinning={getProcdefImageLoading}>
          {getProcdefImageData ? (
            <ScrollBarLayout
              style={{
                margin: '10px 0px',
                padding: '0px 10px',
                overflowX: 'auto',
              }}
            >
              <img src={`data:image/jpeg;base64,${getProcdefImageData}`} />
            </ScrollBarLayout>
          ) : (
            <Empty
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              description={'暂无流程图'}
            />
          )}
        </Spin>
      </OneModal>
    </>
  );
};
